<template>
  <div class="userForm">
  <el-dialog
    :show-close="false"
    :title="title"
    :visible.sync="visible"
    :before-close="closeModal"
    width="30%">
    <el-form ref="forms" label-width="80px" :model="param" :rules="rules"  size="small">
      <el-form-item label="登录名" prop="userName">
        <el-input v-model="param.userName" placeholder="请输入登录名" clearable></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="param.name" placeholder="请输入姓名" clearable></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="param.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属部门" prop="deptId">
        <select_tree ref="trees" v-model="param.deptId" :tree="deptTree" :list="dept" :selectedTree="selectedTree"
                     placeholder="请选择所属部门" size="small"/>
      </el-form-item>
      <el-form-item label="联系方式" prop="tel">
        <el-input v-model="param.tel" placeholder="请输入手机号码" clearable></el-input>
      </el-form-item>
      <el-form-item label="联系地址">
        <el-input v-model="param.address" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入联系地址" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-radio-group v-model="param.state" z>
          <el-radio :label="1"><span>启用</span></el-radio>
          <el-radio :label="0"><span>禁用</span></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" >
    <el-button @click="closeModal" size="small">取 消</el-button>
    <el-button type="primary" @click="submitForm" size="small" v-loading="loading">确 定</el-button>
  </span>
  </el-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line camelcase
import select_tree from '@/views/components/select-tree'
import { userCreate, userUpdate } from '@/api/system/user'
import util from '@/libs/util'
export default {
  components: {
    select_tree
  },
  props: {
    // eslint-disable-next-line vue/require-valid-default-prop
    dept: { type: Array, default: [] },
    // eslint-disable-next-line vue/require-valid-default-prop
    deptTree: { type: Array, default: [] },
    initList: { type: Function }
  },
  data () {
    return {
      visible: false,
      title: '新增',
      treeSelected: {},
      loading: false,
      param: {
        id: '',
        name: '',
        userName: '',
        sex: 1,
        address: '',
        tel: '',
        avatar: '',
        deptId: '',
        state: 0
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        deptId: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
        state: [{ required: true, message: '该用户是否启用', trigger: 'change' }],
        tel: [{ required: true, message: '联系方式必填', trigger: 'change' },
          { pattern: /^1([3-9][0-9])[0-9]{8}$/, message: '手机号码不合法', trigger: 'change' }]
      }
    }
  },
  created () {
  },
  methods: {
    submitForm () {
      this.$refs.forms.validate((valid) => {
        if (valid) {
          this.loading = true
          this.type === 'add' && this.add()
          this.type === 'edit' && this.edit()
        }
      })
    },
    add () {
      util.request(this, userCreate, this.param, this.initList, '创建用户成功')
    },
    edit () {
      util.request(this, userUpdate, this.param, this.initList, '编辑成功')
    },
    closeModal () {
      this.visible = false
      this.loading = false
      this.resetForms()
      this.$refs.forms.resetFields()
    },
    openModal (param) {
      param && this.resetForms(param)
      this.title = param ? '编辑用户' : '添加用户'
      this.type = param ? 'edit' : 'add'
      this.visible = true
    },
    resetForms (param) {
      this.param = {
        id: (param && param.id) || '',
        name: (param && param.name) || '',
        userName: (param && param.userName) || '',
        sex: (param && param.sex) || 1,
        address: (param && param.address) || '',
        tel: (param && param.tel) || '',
        avatar: (param && param.avatar) || '',
        deptId: (param && param.deptId) || '',
        state: (param && param.state) || 0
      }
    },
    selectedTree (e) {
      this.treeSelected = e
    }
  }
}
</script>

<style scoped>
.userForm >>> .el-dialog {
  border-radius: 8px;
}
.userForm >>> .el-input {
  width: 80%;
}
.userForm >>> .el-textarea__inner {
  width: 80%;
}
.userForm >>> .el-select{
  width: 80%;
}
.userForm >>> .el-dialog__body{
  padding: 10px 0 0 20px;
}
.userForm >>> .el-dialog__footer{
  padding: 0 30px 20px;
}
.userForm >>> .el-dialog__header{
  padding: 20px 30px 10px;
}

</style>
